<script>
import isEmpty from 'lodash/isEmpty';
import isFunction from 'lodash/isFunction';
import TouchFeedBack from '../TouchFeedBack';
// import './index.less';
import Icon from '../icon';

export default {
  name: 'Menu',
  components: {
    Icon, TouchFeedBack,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    /*
      是否有边框
    */
    hasLine: {
      type: Boolean,
      default: true,
    },
    /*
      是否跑马灯
    */
    isCarousel: {
      type: Boolean,
      default: false,
    },
    /*
      列数
    */
    columnNum: {
      type: Number,
      default: 4,
    },
    /*
      menu 项大小
    */
    size: {
      type: String,
      default: 'md',
    },
    // /*
    //   每个格子是否固定为正方形
    // */
    // square: {

    // },
    activeClass: {
      type: String,
      default: '',
    },
  },
  methods: {
    getRows() {
      const { activeClass } = this.$props;
      const rowsArr = [];
      const { data, columnNum } = this;
      const dataLength = (data && data.length) || 0;

      const rowCount = Math.ceil(dataLength / columnNum);
      const rowWidth = `${100 / columnNum}%`;
      const colStyle = {
        width: rowWidth,
      };
      // 将数据分为 columnNum（默认4）个一行
      for (let i = 0; i < rowCount; i++) {
        const rowArr = [];
        for (let j = 0; j < columnNum; j++) {
          const dataIndex = i * columnNum + j;
          let itemEl;
          if (dataIndex < dataLength) {
            const el = data && data[dataIndex];
            itemEl = (
              <TouchFeedBack
                activeClass={activeClass || 'grid-item-active'}
              >
                <div
                    class='grid-item'
                    // on-click={() => this.onClick({ el, dataIndex })}
                    style={colStyle}
                  >
                      {this.renderItem(el, dataIndex, columnNum, j)}
                </div>
              </TouchFeedBack>
            );
          } else {
            itemEl = (
            <div
              class='grid-item grid-null-item'
              style={colStyle}
            />
            );
          }
          rowArr.push(itemEl);
        }
        rowsArr.push(<div class="grid-row"> {rowArr} </div>);
      }
      return rowsArr;
    },
    /*
    * 处理单个menu项
    */
    renderItem(dataItem, index, columnNum, itemIndex) {
      let itemEl = null;
      const {
        iconfont, text, icon, id, iconfontcolor, styles
      } = dataItem;
      const { size } = this.$props;
      itemEl = (
        <div
            class={`grid-item-inner-content column-num-${columnNum}`}
            key={id}
            onTap={() => this.onClick(dataItem, index)}
        >
          {
              // TODO 替换为处理icon方法
              icon ? (
              <img class={`grid-icon je-icon-${size}`} style="display: block; width: .8rem; height: .8rem; margin: 0 0 0.3rem 0;" src={icon && JE.getFileUrl(icon) || icon} /> ) : (
              <Icon type={iconfont} size={size} style={ styles } color={iconfontcolor} />
              )  
            }
            <div class='grid-text'>{isFunction(text) ? text() : text}</div>
            <div class="grid-footer">
               {
                /*
                * @slot-scope
                */
               !isEmpty(this.$scopedSlots) && this.$scopedSlots.default({
                 dataItem, rowIndex: index, itemIndex,
               })
              }
            </div>
          </div>
      );
      return <div class={'grid-item-content'}>{itemEl}</div>;
    },
    onClick(item) {
      this.$emit('tap', item);
    },
    triggerEvent(event, isActive) {
      if (isActive !== this.active) {
        this.active = isActive;
      }
    },
  },
  render() {
    return (
      <div class="grid-menu-wrapper">
        {this.getRows()}
      </div>
    );
  },
};
</script>


<style lang="less" scoped>
@import '~@/theme/index.less';
  .grid-menu-wrapper{
     width: 100%;
  }
  .grid-row{
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
    .grid-item{
      flex: 1;
      text-align: center;
      position: relative;
      .grid-text{
        margin: 6px 0 11px 0;
        color: #3f3f3f;
        // font-size: 14 * @hd;
      }
      .jeicon{
        color: #bee1fa;
      }
      &:before{
        display: block;
        content: " ";
        padding-bottom: 100%;
      }
      &.grid-item-active {
        .grid-item-content {
          background-color: @fill-tap;
        }
      }
      .grid-item-content{
        position: absolute;
        width: 100%;height: 100%;
        text-align: center;
        padding: 15px 0;
        top: 50%;
        transform: translateY(-50%);
        .grid-item-inner-content{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center
        }
      }
    }
  }
</style>
